<template>
  <div class="InvoiceIdentification">
    <img src="../assets/发票圈.svg" alt="" style="background:#fff;">
    <p class="invoiceTitle" v-if="data.invoiceType == '01'" >增值税专用发票</p>
    <p class="invoiceTitle" v-if="data.invoiceType == '02'" >货运运输业增值税专用发票</p>
    <p class="invoiceTitle" v-if="data.invoiceType == '03'" >机动车销售统一发票</p>
    <p class="invoiceTitle" v-if="data.invoiceType == '04'" >增值税普通发票</p>
    <p class="invoiceTitle" v-if="data.invoiceType == '10'" >增值税普通发票(电子)</p>
    <p class="invoiceTitle" v-if="data.invoiceType == '11'" >增值税普通发票(卷式)</p>
    <p class="invoiceTitle" v-if="data.invoiceType == '14'" >通行费发票</p>
    <p class="invoiceTitle" v-if="data.invoiceType == 'T1'" >通用机打发票</p>
    <div class="itemList">
      <p class="item">
        <span>金额</span>
        <span>￥{{data.invoiceAmount}}</span>
      </p>
      <p class="item">
        <span>税额</span>
        <span>￥{{data.taxAmount}}</span>
      </p>
      <p class="item">
        <span>税价合计</span>
        <span class="black" style="font-size:14px">￥{{data.totalAmount}}</span>
      </p>
    </div>

    <div class="itemList">
      <p class="item">
        <span>发票代码</span>
        <span>{{data.invoiceCode}}</span>
      </p>
      <p class="item">
        <span>开票号码</span>
        <span>{{data.invoiceNo}}</span>
      </p>
      <p class="item">
        <span>开票日期</span>
        <span>{{data.invoiceDate}}</span>
      </p>
      <p class="item">
        <span>效验码</span>
        <span>{{data.checkCode}}</span>
      </p>
    </div>

    <div class="itemList">
      <p class="item">
        <span>购买方</span>
        <span class="black">{{data.buyerName}}</span>
      </p>
      <p class="item">
        <span>纳税人识别号</span>
        <span class="black">{{data.buyerTaxNo}}</span>
      </p>
      <p class="item ">
        <span class="itemTitle">地址、电话</span>
        <span class="marginTen">{{data.buyerAddressPhone}}</span>
      </p>
      <p class="item">
        <span class="itemTitle">开户行及电话</span>
        <span class="marginTen">{{data.buyerAcount}}</span>
      </p>
    </div>

    <div class="itemList">
      <p class="item">
        <span>销售方</span>
        <span class="black">{{data.salerName}}</span>
      </p>
      <p class="item">
        <span>纳税人识别号</span>
        <span class="black">{{data.salerTaxNo}}</span>
      </p>
      <p class="item">
        <span class="itemTitle">地址、电话</span>
        <span class="marginTen">{{data.salerAddressPhone}}</span>
      </p>
      <p class="item">
        <span class="itemTitle">开户行及电话</span>
        <span class="marginTen">{{data.salerAcount}}</span>
        <!-- <span>{{data.salerAddressPhone}}</span> -->
      </p>
    </div>

    <div class="itemList">
      <ul>
        <li>
          <div class="liMain">
            <p>货物或应税劳务、服务</p>
          </div>
          <div>
            <p>金额</p>
          </div>
          <div>
            <p>税率</p>
          </div>
          <div>
            <p>税额</p>
          </div>
        </li>
        <li v-for="(item,index) in data.jxfpDetailses" :key="index">
          <div class="liMain">
            <p class="black beyondName" >{{data.jxfpDetailses[index].goodsName}}</p>
          </div>
          <div>
            <p class="black">￥{{data.jxfpDetailses[index].detailAmount}}</p>
          </div>
          <div>
            <p class="black">{{data.jxfpDetailses[index].taxRate}}</p>
          </div>
          <div>
            <p class="black">￥{{data.jxfpDetailses[index].taxAmount}}</p>
          </div>
        </li>
      </ul>
    </div>

    <div class="itemList lastItem">
      <!-- <p class="itemRemark" v-show="deleteShow">
        <span>摘要</span>
        <span class="black">{{data.remark}}</span>
      </p> -->
      <p class="item" v-show="deleteShow">
        <span>摘要</span>
        <span>{{data.remark}}</span>
      </p>
      <p class="itemRemark" v-show="!deleteShow">
        <mt-field label="摘要" placeholder="输入发票事宜或标记，选填" v-model="remark"></mt-field>
      </p>
    </div>
      
    <div class="button">
      <mt-button type="primary" size="small" v-show="!deleteShow" @click="sureUpload">确认上传</mt-button>
      <mt-button type="default" size="small" v-show="deleteShow" @click="deleteBtn">删除</mt-button>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import { Button, Toast } from 'mint-ui';
	import Bus from '@/bus.js'
import { MessageBox } from 'mint-ui';

  export default {
    data () {
      return {
        data:{},
        remark:'',
        userId:'',
        number:1,
        type:'',
        dataVal:true,
        deleteShow:false,
        invoiceData:{
          apiType: "CYFP",
          blueInvoiceCode: "",
          blueInvoiceNo: "",
          buyerAcount: "",                             //购方开户行及账号
          buyerAddressPhone: "",                      //购方地址、电话
          buyerName: "深圳爱校信息技术有限公司",     //购方名称
          buyerTaxNo: "91440300359819522L",          //购方税号 现在是 15/18 位
          cancellationMark: "N",
          checkCode: "49094899323312482677",       //校验码
          checkCount: "1",
          createAt: "2018-08-29 11:41:02",
          currentTaxPeriod: "",
          drawer: "",
          id: "146",
          invoiceAmount: "106.83",
          invoiceCode: "035021700111",           //发票代码 10 或 12 位
          invoiceDate: "20180302",               //开票日期 yyyyMMdd
          invoiceNo: "26891469",                //发票号码 8 位
          invoiceStatus: "",
          invoiceType: "10",
          jxfpDetailses: [ {
              detailAmount: "-11.97",          //金额 
              detailNo: "2",
              goodsName: "44444",                  //货物名称
              goodsNum: "",
              id: "238",
              lx: "",
              num: "0",                       //数量
              removeStatus: "0",
              specificationModel: "",         //规格型号 
              taxAmount: "-2.03",             //税额 
              taxDetailAmount: "",            
              taxRate: "17%",                 //税率 正数如税率 17%，填写 17
              taxUnitPrice: "",
              txrqq: "",
              txrqz: "",
              unit: "",                      //计量单位 
              unitPrice: "0"                 //不含税单价
            },{
              detailAmount: "-11.97",          //金额 
              detailNo: "2",
              goodsName: "22222",                  //货物名称
              goodsNum: "",
              id: "238",
              lx: "",
              num: "0",                       //数量
              removeStatus: "0",
              specificationModel: "",         //规格型号 
              taxAmount: "-2.03",             //税额 
              taxDetailAmount: "",            
              taxRate: "15%",                 //税率 正数如税率 17%，填写 17
              taxUnitPrice: "",
              txrqq: "",
              txrqz: "",
              unit: "",                      //计量单位 
              unitPrice: "0"                 //不含税单价
            } 
          ],
          machineNo: "661620001408",
          payee: "",
          remark: "订单号:72648287785,",                //备注
          salerAcount: "",                              //销方开户行及账号
          salerAddressPhone: "",                        //销方地址、电话
          salerName: "厦门京东东和贸易有限公司",        //销方名称
          salerTaxNo: "91350212MA34A9L25L",             //销方税号 真实税号是 15/18 位
          sfdbts: "",
          taxAmount: "18.17",
          totalAmount: "125.00",            
        },
      }
    },
    created(){
      Bus.$on('invoiceDataVal',(msg) => {
        if(this.dataVal){
          this.data = msg
          this.dataVal = false
        }
      });
      Bus.$on('invoicedigest',(msg) => {
         this.remark = msg
      });
      this.userId = this.$route.params.userId;
      this.type = this.$route.params.type;
      if(this.type == 'info'){
        this.deleteShow = true;
      }else if(this.type == 'upload'){
        this.deleteShow = false;
      }
    },
    beforeDestroy () {
      this.data = {};
      this.dataVal = true;
  		Bus.$off('invoiceDataVal',this.data);
  		Bus.$off('invoicedigest',this.remark);
    },
    
    methods:{
      sureUpload(){ //确认上传
        var self = this;
        axios({
          headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
          method: 'get',
          url: '/wechatInvoice/invoice/confirm.do',
          params: {
            data: (() => {
              let obj = {
                    invoiceId:this.data.id,     //发票id",
                    userId:this.userId,     //用户id",
                    remark:this.remark,     //备注",
              }
              Object.assign(obj, this.searchObj)
              return JSON.stringify(obj);
            })()
          }
        }).then((rep) => {
          if(rep.data.status == '1'){
            Toast({
              message: '上传成功',
              iconClass: 'icon icon-success',
              duration: 1000
            });
            // self.$router.push({path:'/InvoiceClip/'+self.userId});
            self.$router.push({path:'/HelloWorld/2/'+self.userId});
          }else{
            Toast({
              message: rep.data.msg,
              duration: 1000
            });
          }
        }, (rep) => { });
      },
    deleteBtn(){   //删除确认
      MessageBox.confirm('确定删除此发票?').then(action => {
        if(action == 'confirm'){
          this.deleteBtnClick();
        }
      });
    },
    deleteBtnClick(){   //删除
        var self = this;
        axios({
          headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
          method: 'get',
          url: '/wechatInvoice/invoice/delInvoice.do',
          params: {
            data: (() => {
              let obj = {
                    id:this.data.id,     //发票id",
                    userId:this.userId,     //用户id",
              }
              Object.assign(obj, this.searchObj)
              return JSON.stringify(obj);
            })()
          }
        }).then((rep) => {
          if(rep.data.status == '1'){
            Toast({
              message: '删除成功',
              iconClass: 'icon icon-success',
              duration: 1000
            });
            // self.$router.push({path:'/InvoiceClip/'+self.userId});
            self.$router.push({path:'/HelloWorld/2/'+self.userId});
          }else{
            Toast({
              message: '删除失败',
              duration: 1000
            });

          }
        }, (rep) => { });
      },
    },
  };
</script>

<style lang="less" scoped>
  p,ul{
    margin: 0;
    padding: 0;
  }
  li {
    list-style: none;
  }
  .InvoiceIdentification{
    // color: rgba(171, 171, 171, 1);
    background: rgb(255, 255, 255);
    font-size: 12px;
    font-family: Arial;
    padding: 0px 8px;
    padding-bottom: 50px;
    .invoiceTitle{
      margin-top:-42px;
      font-size:16px;
      color:black;
      font-weight:500;
    }
  }
  img{
    width: 163px;
    margin: 0 auto;
    height: 40px;
    background-color: #eee;
    margin-bottom: 8px;
  }
  .item{
    display: flex;
    // display: inline-block;
    justify-content: space-between;
    // height: 25px;
    // width: 90%;

    // flex-wrap: wrap;
    line-height: 25px;
  }
  .itemList{
    border-bottom: solid 1px #D4D4D4;
    padding: 8px 0px;
  }

  .lastItem{
    border-bottom: none;
    .itemRemark{
      height: 30px;
      line-height: 30px;
      margin-left: 10px;
    }
  }
  span{
    color:#7B7B7B ;
  }
  .black{
    color: #333333;
  }

  ul{
    padding: 9px 0px;
    li{
      display: flex;
      div{
        flex: 1;
        p{
          height: 23px;
          line-height: 23px;
        }
      }
    }
    .liMain{
      min-width: 121px;
    }
  }

  .button{
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 95%;
    margin: 0 auto;
    padding-bottom: 8px;
    padding-top: 8px;
    background-color: #fff;
    .mint-button{
      width: 90%;
      margin: 0 auto;
    }
  }
  .beyondName{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .itemTitle{
    min-width: 72px;
    // width: 100%;
    display: flex;
    flex-direction: row ;
  }
  .marginTen{
    margin-left: 10px;
    width: calc(100%-72px);
    text-align: right;
    // white-space:nowrap;
  }
</style>
